<template>
  <section id="about" class="section">
    <div class="container-full">
      <h2 class="section-title fade-in">关于我</h2>
      <div class="about-content">
        <div class="about-left card fade-in">
          <div class="profile-section">
            <div class="profile-avatar">
              <div class="avatar-glow"></div>
              <div class="avatar-inner">ZS</div>
            </div>
            <div class="profile-info">
              <h3 class="profile-name">张三</h3>
              <p class="profile-title">高级前端开发工程师</p>
              <p class="profile-location">📍 中国 · 北京</p>
            </div>
          </div>
          <div class="profile-description">
            <p>
              我是一名拥有<strong class="glow-text">5年+</strong>经验的前端开发工程师，专注于构建高性能、
              用户友好的Web应用程序。热衷于探索前沿技术，并将其应用于实际项目中。
            </p>
          </div>
          <div class="profile-highlights">
            <div class="highlight-item">
              <span class="highlight-icon">⚡</span>
              <div>
                <h4>快速迭代</h4>
                <p>敏捷开发，快速响应需求变化</p>
              </div>
            </div>
            <div class="highlight-item">
              <span class="highlight-icon">🎯</span>
              <div>
                <h4>用户至上</h4>
                <p>注重用户体验，细节决定品质</p>
              </div>
            </div>
            <div class="highlight-item">
              <span class="highlight-icon">🚀</span>
              <div>
                <h4>性能优化</h4>
                <p>追求极致性能，代码质量优先</p>
              </div>
            </div>
            <div class="highlight-item">
              <span class="highlight-icon">🤝</span>
              <div>
                <h4>团队协作</h4>
                <p>良好的沟通能力，乐于分享经验</p>
              </div>
            </div>
          </div>
        </div>

        <div class="about-right">
          <div class="stats-card card fade-in">
            <h3 class="card-subtitle">数据统计</h3>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-icon">💼</div>
                <div class="stat-number glow-text">5+</div>
                <div class="stat-label">年开发经验</div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">🚀</div>
                <div class="stat-number glow-text">20+</div>
                <div class="stat-label">完成项目</div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">⚙️</div>
                <div class="stat-number glow-text">10+</div>
                <div class="stat-label">技术栈</div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">⭐</div>
                <div class="stat-number glow-text">100%</div>
                <div class="stat-label">客户满意度</div>
              </div>
            </div>
          </div>

          <div class="skills-preview card fade-in">
            <h3 class="card-subtitle">核心技能</h3>
            <div class="skills-list">
              <div class="skill-tag">Vue.js</div>
              <div class="skill-tag">React</div>
              <div class="skill-tag">TypeScript</div>
              <div class="skill-tag">Node.js</div>
              <div class="skill-tag">微前端</div>
              <div class="skill-tag">性能优化</div>
            </div>
          </div>

          <div class="achievements-card card fade-in">
            <h3 class="card-subtitle">工作理念</h3>
            <div class="philosophy-list">
              <div class="philosophy-item">
                <span class="philosophy-icon">💡</span>
                <span>持续学习，拥抱变化</span>
              </div>
              <div class="philosophy-item">
                <span class="philosophy-icon">🎨</span>
                <span>代码简洁，设计优雅</span>
              </div>
              <div class="philosophy-item">
                <span class="philosophy-icon">🔧</span>
                <span>工具赋能，效率优先</span>
              </div>
              <div class="philosophy-item">
                <span class="philosophy-icon">🌟</span>
                <span>用户第一，价值导向</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
</script>

<style scoped>
.about-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
}

.about-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.profile-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.profile-avatar {
  position: relative;
  width: 120px;
  height: 120px;
}

.avatar-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 3s infinite;
}

.avatar-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  border: 3px solid var(--accent-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-blue);
  font-family: 'JetBrains Mono', monospace;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.profile-title {
  font-size: 1.1rem;
  color: var(--accent-blue);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.profile-location {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.profile-description p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.profile-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.highlight-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.highlight-icon {
  font-size: 1.8rem;
  min-width: 40px;
}

.highlight-item h4 {
  color: var(--text-primary);
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.highlight-item p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
}

.about-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card-subtitle {
  font-size: 1.3rem;
  color: var(--accent-blue);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-subtitle::before {
  content: '</>';
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-purple);
  font-size: 1rem;
}

.stats-card {
  animation: slideInRight 0.6s ease-out both;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.3s;
}

.stat-item:hover {
  background: rgba(0, 217, 255, 0.1);
  transform: translateY(-3px);
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.3rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.skills-preview {
  animation: slideInRight 0.6s ease-out 0.1s both;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.skill-tag {
  padding: 0.6rem 1.2rem;
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--accent-blue);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s;
  cursor: default;
}

.skill-tag:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
  transform: scale(1.05);
}

.achievements-card {
  animation: slideInRight 0.6s ease-out 0.2s both;
}

.philosophy-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.philosophy-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  transition: all 0.3s;
}

.philosophy-item:hover {
  background: rgba(0, 217, 255, 0.05);
  border-left: 3px solid var(--accent-blue);
  padding-left: 1.3rem;
}

.philosophy-icon {
  font-size: 1.5rem;
  min-width: 35px;
}

.philosophy-item span:last-child {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr;
  }

  .profile-highlights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .profile-section {
    flex-direction: column;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .skills-list {
    justify-content: center;
  }
}
</style>
